<template>
  <div class="report">
      <x-header :left-options="{showBack: true, backText:'帮助与反馈'}"><div class="vux-header-right" @click="report"><span class="iconfont icon-Ge_Dizhi_Gou"></span></div></x-header>
      <form>
        <textarea name="content" id="report" rows="10" placeholder="请留下您的宝贵意见，我们将努力改进" v-model="info"></textarea>
      </form>

      <!--BEGIN toast-->
      <div class="layer" v-show="layshow">{{laymsg}}</div>
      <!--end toast-->

  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  },
  data:function(){
    return {
      info:'',
      layshow:false,
      laymsg:'',
    }
  },
  methods: {
    layer(bool,msg){
      var _this = this;
      this.layshow = bool;
      this.laymsg = msg;
      setTimeout(function(){
        _this.layshow = false;
      },1000)
    },
    report: function () {
      var openId = JSON.parse(localStorage.getItem('openid'));//获取用户ID
      var ajaxUrl = '/api/report?openid='+openId;
      if(this.info.length<10){
        this.layer(true,'请至少输入10个字符');
      }else{
        this.$http.post(ajaxUrl,{'content': this.info}).then((res) => {
          this.layer(true,'提交成功');
          var _this = this;
          setTimeout(function(){
            _this.$router.push({path:'/dist/Person'})
          },1000);
        }).catch(function(){
          this.layer(true,'提交失败');
        });
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.report{
  margin-top:46px;
}
#report{
  width:100%;
  height:16rem;
  border:none;
  outline:none;
  resize:none;
  padding-top:12px;
  font-family:"Microsoft YaHei"!important;
  font-size:16px;
  text-indent:1rem;
  margin-top:8px;
  margin-bottom:12px;
  color:#969696;
}
.vux-header{
  background-color:#ff4d4d;
}
.vux-header-right .iconfont{
  color:#fff;
  font-size:22px;
}
.weui-toast__content{
  font-size:16px;
}
.weui-toast{
  width:9.6rem;
  margin-left: -5.4em;
}
</style>